<template>
  <view class="uv-ui-demo">
    <view class="demo-section">
      <view class="section-title">按钮组件</view>
      <view class="button-group">
        <uv-button type="primary">主要按钮</uv-button>
        <uv-button type="success">成功按钮</uv-button>
        <uv-button type="warning">警告按钮</uv-button>
        <uv-button type="error">错误按钮</uv-button>
      </view>
    </view>

    <view class="demo-section">
      <view class="section-title">输入框组件</view>
      <uv-input v-model="inputValue" placeholder="请输入内容" />
    </view>

    <view class="demo-section">
      <view class="section-title">选择器组件</view>
      <uv-picker :columns="pickerColumns" @change="handlePickerChange" />
    </view>

    <view class="demo-section">
      <view class="section-title">图标组件</view>
      <view class="icon-group">
        <uv-icon name="home" size="30" />
        <uv-icon name="search" size="30" />
        <uv-icon name="user" size="30" />
      </view>
    </view>

    <view class="demo-section">
      <view class="section-title">工具方法测试</view>
      <view class="tool-test">
        <view class="tool-item">
          <text>操作系统：{{ osInfo }}</text>
        </view>
        <view class="tool-item">
          <text>系统信息：{{ sysInfo }}</text>
        </view>
        <view class="tool-item">
          <text>去除空格：{{ trimResult }}</text>
        </view>
        <view class="tool-item">
          <text>随机数：{{ randomNum }}</text>
        </view>
        <view class="tool-item">
          <text>配置信息：{{ configInfo }}</text>
        </view>
      </view>
    </view>

    <view class="demo-section">
      <view class="section-title">单位配置测试</view>
      <view class="unit-test">
        <uv-button type="primary" size="mini" :custom-style="{ width: '200', height: '60' }">
          测试按钮
        </uv-button>
        <view class="unit-info">
          <text>按钮宽度：200{{ unit }}</text>
          <text>按钮高度：60{{ unit }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      pickerColumns: [['选项1', '选项2', '选项3']],
      osInfo: '',
      sysInfo: '',
      trimResult: '',
      randomNum: 0,
      configInfo: '',
      unit: 'rpx',
    }
  },
  created() {
    // 测试工具方法
    this.osInfo = uni.$uv.os()
    this.sysInfo = JSON.stringify(uni.$uv.sys())
    this.trimResult = uni.$uv.trim(' abc ')
    this.randomNum = uni.$uv.random(1, 3)
    this.configInfo = JSON.stringify(uni.$uv.config)
    this.unit = uni.$uv.config?.unit || 'rpx'

    // 控制台输出
    console.log('操作系统：', uni.$uv.os())
    console.log('系统信息：', uni.$uv.sys())
    console.log('去除空格：', uni.$uv.trim(' abc '))
    console.log('随机数：', uni.$uv.random(1, 3))
    console.log('配置信息：', uni.$uv.config)
    console.log('当前单位：', this.unit)
  },
  methods: {
    handlePickerChange(e) {
      console.log('选择器值变化：', e)
    },
  },
}
</script>

<style lang="scss">
.uv-ui-demo {
  padding: 20rpx;

  .demo-section {
    padding: 20rpx;
    margin-bottom: 30rpx;
    background-color: #fff;
    border-radius: 8rpx;

    .section-title {
      margin-bottom: 20rpx;
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
    }

    .button-group {
      display: flex;
      flex-wrap: wrap;
      gap: 20rpx;
    }

    .icon-group {
      display: flex;
      gap: 30rpx;
    }

    .tool-test {
      .tool-item {
        margin-bottom: 10rpx;
        font-size: 24rpx;
        color: #666;
      }
    }

    .unit-test {
      display: flex;
      flex-direction: column;
      gap: 20rpx;
      align-items: center;

      .unit-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}
</style>
